<template>
    <div>
      <table border="1">
        <tr>
          <th>名字</th>
          <th>密码</th>
          <th>登陆次数</th>
          <th>图片</th>
          <th>删除</th>
          <th>修改</th>
        </tr>
        <tr v-for=" i in users">
          <td>{{i.username}}</td>
          <td>{{i.password}}</td>
          <td>{{i.count}}</td>
          <!--<td>{{i.count}}</td>-->
          <td><img :src="'http://127.0.0.1:8000' + i.img" width="50px" height="50px"></td>
          <td><a href="" @click.prevent="del(i.id)">删除</a></td>
          <!--<td><router-link :to="{'name':'Update',query:{'id':i.id}}">修改</router-link></td>-->
          <!--<td>{{i.password2}}</td>-->
          <td><router-link :to="{'name':'Update',query:{'id':i.id}}">修改</router-link></td>

        </tr>
      </table>
      <span v-for="num in pages">
            <input type="button" :value="num" @click="good_list(num)">
      </span>
    </div>
</template>

<script>
  import axios from 'axios'
    export default {
        name: "Index",
      data:function () {
        return{
          users:'',
          pages:[],
        }
      },
      mounted() {
          axios({
            url:'http://127.0.0.1:8000/showgood/',
            method:'post'
          }).then(res=>{
            console.log(res);
            this.users=res.data.message
            this.pages = res.data.list
          })
      },
      methods: {
          good_list(num){
                axios({
                    method: 'post',
                    url: 'http://127.0.0.1:8000/showgood/',
                    data: {
                        'p':num
                    }
                }).then(res=>{
                  this.users = res.data.message
                  this.pages = res.data.list
                })
            },
            del(id_) {
              axios({
                url: 'http://127.0.0.1:8000/delete/',
                method: 'post',
                data: {
                  id_: id_
                }
              }).then(res => {
                window.location.reload()
              })
          }
       }
    }
</script>

<style scoped>

</style>
